<template>
  <div class="book-list-container">
    <el-table :data="books" style="width: 100%">
      <!-- 表格列定义，可根据实际需求补充 ID、书名等列 -->
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <div class="button-group">
            <el-button @click="editBook(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deleteBook(scope.row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 数据为空时显示提示 后端现在无数据，想要展示样式-->
    <div v-if="books.length === 0" class="no-data">
      后端不通所以没有数据
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      books: [] // 存储从 API 获取的图书数据
    };
  },
  methods: {
    fetchBooks() {
      axios.get('http://127.0.0.1:8000/book/ts/info')
       .then(response => {
          if (response.data.code === 200) {
            this.books = response.data.data; // 存储 API 返回的书籍数据
          } else {
            console.error('获取图书失败：', response.data.message);
          }
        })
       .catch(error => {
          console.error('请求失败:', error.message);
        });
    },
    editBook(book) {
      // 此处处理编辑逻辑，可扩展为跳转到编辑页面等
      console.log('编辑图书', book);
    },
    deleteBook(bookId) {
      // 此处处理删除逻辑，可扩展为调用后端接口删除数据
      console.log('删除图书 ID:', bookId);
    }
  },
  created() {
    this.fetchBooks(); // 组件创建时获取图书数据
  }
};
</script>

<style scoped>
.book-list-container {
  padding: 20px; /* 增加内边距 */
}

.el-table {
  border-radius: 10px; /* 表格圆角 */
  overflow: hidden; /* 超出部分隐藏 */
}

.button-group {
  display: flex;
  justify-content: space-between; /* 分散按钮，均匀分布 */
  width: 100%; /* 设置宽度为 100%，以占满整个列 */
}

.no-data {
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 16px;
}


</style>